/**
 * Created by yzdd on 2018/6/9.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity,
  FlatList
} from 'react-native';
import {line, publicStyle, width} from "../utils/publiscStyle";
import {observable} from 'mobx';
import {observer} from 'mobx-react';
import {DeliveryManagementStore} from "../logics/DeliveryManagementStore";
import DeliveryDetail from "./DeliveryDetail";
import DeliveryEndDetail from "./DeliveryEndDetail";

const styles = StyleSheet.create({
  topHeader: {
    width,
    height: 41,
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#FFFFFF",
    paddingLeft: 15,
    paddingRight: 15,
    borderBottomColor: "#EEEEEE",
    borderBottomWidth: 1
  },
  item: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  textActiveItem: {
    borderBottomColor: "#1AAD19",
    borderBottomWidth: 3,
    height: 41,
    alignItems: 'center',
    justifyContent: "center"
  },
  textItem: {
    height: 41,
    alignItems: 'center',
    justifyContent: "center"
  },
  font3Active: {
    fontSize: 14,
    color: "#1AAD19"
  },
  font3: {
    fontSize: 14,
    color: "#333333"
  },
  searchBox: {
    width,
    height: 44,
    flexDirection: "row"
  },
  searchHeader: {
    width,
    height: 49,
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#FFFFFF",
    paddingLeft: 15,
  },
  leftInputView: {
    backgroundColor: "#F3F3F3",
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
    height: 35,
    borderRadius: 5,
    paddingLeft: 14
  },
  icon3: {
    width: 16,
    height: 16
  },
  leftInput: {
    flex: 1,
    padding: 0,
    paddingLeft: 10,
    fontSize: 14
  },
  searchBtn: {
    width: 53,
    height: 35,
    alignItems: 'center',
    justifyContent: "center"
  },
  font7: {
    fontSize: 14,
    color: "#666666"
  },
  con: {
    flex: 1
  },
  listItem: {
    width,
    height: 86,
    marginTop: 10
  },
  bodyListItem: {
    width: width - 20,
    marginLeft: 10,
    marginRight: 10,
    height: 86,
    backgroundColor: "#FFFFFF",
    borderRadius: 5
  },
  topBody: {
    width: width - 20,
    height: 47,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: "space-between",
    borderBottomColor: "#EEEEEE",
    borderBottomWidth: 1,
    paddingLeft: 15,
    paddingRight: 15
  },
  font4: {
    fontSize: 16,
    color: "#000000"
  },
  font5: {
    fontSize: 14,
    color: "#999999"
  },
  deliveryBtn: {
    width: 52,
    height: 24,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 2,
    borderColor: "#1AAD19",
    borderWidth: line
  },
  font6: {
    fontSize: 16,
    color: "#1AAD19"
  },
  bottomBody: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: 15,
    paddingRight: 15
  },
  font8: {
    fontSize: 12,
    color: "#999999"
  }
});
const searchIcon = require("../assets/search.png");
@observer
export default class DeliveryManagement extends Component {
  static navigationOptions = {
    title: "发货管理"
  }

  @observable
  searchText = "";

  deliveryManagementStore = new DeliveryManagementStore();

  renderItem = (item, index) => {
    return <Item navigation={this.props.navigation} item={item} index={index}/>
  }

  renderDeliveryItem = (item, index) => {
    return <DeliveryItem navigation={this.props.navigation} item={item} index={index}/>
  }

  select = (name) => {
    this.deliveryManagementStore.index = name;
  }

  render() {
    return (
      <View style={publicStyle.container}>
        <View style={styles.topHeader}>
          <TouchableOpacity style={styles.item} onPress={() => this.select(0)}>
            <View style={[this.deliveryManagementStore.index === 0 ? styles.textActiveItem : styles.textItem]}>
              <Text
                style={[this.deliveryManagementStore.index === 0 ? styles.font3Active : styles.font3]}>待发货(10)</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={styles.item} onPress={() => this.select(1)}>
            <View style={[this.deliveryManagementStore.index === 1 ? styles.textActiveItem : styles.textItem]}>
              <Text
                style={[this.deliveryManagementStore.index === 1 ? styles.font3Active : styles.font3]}>已发货</Text>
            </View>
          </TouchableOpacity>
        </View>
        <View style={styles.searchHeader}>
          <View style={styles.leftInputView}>
            <Image
              source={searchIcon}
              resizeMode={"contain"}
              style={styles.icon3}
            />
            <TextInput
              style={styles.leftInput}
              placeholder={"请输入采购员/采购单号"}
              underlineColorAndroid="transparent"
              onChangeText={(text) => this.searchText = text}
              value={this.searchText}
            />
          </View>
          <TouchableOpacity style={styles.searchBtn} onPress={this.searchSub}>
            <Text style={styles.font7}>搜索</Text>
          </TouchableOpacity>
        </View>
        {
          this.deliveryManagementStore.index === 0 ?
            <FlatList
              style={styles.con}
              data={[1, 2, 3]}
              keyExtractor={(item, index) => index}
              renderItem={({item, index}) => this.renderItem(item, index)}
            /> :
            <FlatList
              style={styles.con}
              data={[1, 2, 3]}
              keyExtractor={(item, index) => index}
              renderItem={({item, index}) => this.renderDeliveryItem(item, index)}
            />
        }
      </View>
    );
  }
}

@observer
class Item extends Component {
  toDetail = () => {
    const {navigate} = this.props.navigation;
    navigate("DeliveryDetail")
  }

  render() {
    return (
      <View style={styles.listItem}>
        <View style={styles.bodyListItem}>
          <View style={styles.topBody}>
            <Text style={styles.font4}>李俊</Text>
            <Text style={styles.font5}>2018-02-22</Text>
          </View>
          <View style={styles.bottomBody}>
            <Text style={styles.font8}>采购订单: 20180517001</Text>
            <TouchableOpacity style={styles.deliveryBtn} onPress={this.toDetail}>
              <Text style={styles.font6}>发货</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }
}

@observer
class DeliveryItem extends Component {
  toDetail = () => {
    const {navigate} = this.props.navigation;
    navigate("DeliveryEndDetail")
  }
  render() {
    return (
      <View style={styles.listItem}>
        <View style={styles.bodyListItem}>
          <View style={styles.topBody}>
            <Text style={styles.font4}>李俊</Text>
            <Text style={styles.font5}>2018-02-22</Text>
          </View>
          <View style={styles.bottomBody}>
            <Text style={styles.font8}>采购订单: 20180517001</Text>
            <TouchableOpacity style={styles.deliveryBtn} onPress={this.toDetail}>
              <Text style={styles.font6}>查看</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }
}